import React, { ReactNode, useEffect, useRef, useState } from 'react';
import styles from './index.module.css';
import { Button, Icon, Dialog, Divider, Loading, Table } from '@alicloudfe/components';
import CustomIcon from '@/components/CustomIcon';
import Empty from '@/components/Empty';
import ModelConfigDialog from './ModelConfigDialog';
import { IUserConfiguredModelInfo } from '@/AI/ai';
import { deleteConfiguredModelKey, getConfiguredModelList } from '@/AI/apis';


interface IProps {
  children?: ReactNode;
  updateModelKeys?: (modelKeys: IUserConfiguredModelInfo[]) => void;
}

const AIAssistantSetting = (props: IProps) => {
  const {
    updateModelKeys = () => {},
    children,
  } = props;
  const [loading, setLoading] = useState(false);

  // 用户已经设置了的模型列表
  const [configuredModelList, setConfiguredModelList] = useState<IUserConfiguredModelInfo[]>([]);
  const updateModelList = (newModelList: IUserConfiguredModelInfo[]) => {
    setConfiguredModelList(newModelList);
    updateModelKeys(newModelList);
  };

  const getHaveSetModelKeys = () => {
    setLoading(true);
    getConfiguredModelList().then((res) => {
      setLoading(false);
      updateModelList(res);
    }).catch(() => {
      setLoading(false);
    });
  };
  useEffect(() => {
    getHaveSetModelKeys();
  }, []);

  const beforeDelete = (item: IUserConfiguredModelInfo) => {
    Dialog.alert({
      v2: true,
      title: '确定移除吗?',
      content: '',
      onOk: () => deleteModeKey(item),
    });
  };

  const deleteModeKey = (modeInfo: IUserConfiguredModelInfo) => {
    const {
      modelId,
      version,
    } = modeInfo;
    deleteConfiguredModelKey({
      modelId,
      version,
    }).then(() => {
      getHaveSetModelKeys();
    });
  };

  const dialogRef = useRef<any>(null);


  return (
    <div>
      <div className={styles.header}>
        <h3 className={styles.title}>
          AI 助手
        </h3>

        <Button
          type="primary"
          onClick={() => {
            dialogRef.current.editModelKey({});
          }}
        >
          添加 AI
        </Button>
        <ModelConfigDialog
          ref={dialogRef}
          onSave={() => {
            getHaveSetModelKeys();
          }}
        />
      </div>
      {children}
      <Divider style={{ margin: '16px 0 0' }} />
      <Table
        dataSource={configuredModelList}
        loading={!!loading}
        loadingComponent={
          (loadingProps) => <Loading {...loadingProps} size="medium" />
        }
        emptyContent={<Empty />}
        className={styles.table}
      >
        <Table.Column
          title="模型名称"
          dataIndex="name"
        />
        <Table.Column
          title="版本"
          dataIndex="version"
        />
        <Table.Column
          title="操作"
          dataIndex="opts"
          width={200}
          align="center"
          cell={
            (value, index, record) => {
              return (
                <div className={styles.rowOperations}>
                  <Button text className={styles.editBtn} onClick={() => dialogRef.current.editModelKey(record)}>
                    <Icon type="edit" style={{ marginRight: '2px' }} />编辑
                  </Button>
                  <Button text warning className={styles.warningbtn} onClick={() => beforeDelete(record)}>
                    <CustomIcon type="icon-projectOquit-line" style={{ marginRight: '2px' }} />移除
                  </Button>
                </div>
              );
            }
          }
        />
      </Table>
    </div>
  );
};

export default AIAssistantSetting;

